# Trial OS design system

Oct 1, 2026 · sprint 1 (design review #10). Every screen uses these tokens and components. A new pattern is added here before it is built.

**The use scene.** Two places: an analyst or investigator at a desk, and a room watching a live demo on a projector. The surface is light, because both rooms are lit. The interface is a tool (OPERATE), not a brochure.

## Tokens

### Colour

| Token | Value | Use |
|---|---|---|
| `ink` | `#17211E` | Main text, the rail background, the source-label marks |
| `rail-active` | `#2C3A36` | Current item in the rail |
| `rail-text` | `#E9ECE8` | Text on the rail |
| `rail-muted` | `#A9B3AE` | Act headings, step numbers and captions on the rail (7.7:1) |
| `rail-highlight` | `#7FD1C7` | The zone status dot only |
| `ground` | `#F3F4F1` | Page background |
| `surface` | `#FFFFFF` | Tables and panels |
| `secondary` | `#56615D` | Captions, units, table headers (6.4:1 on surface) |
| `border` | `#D8DCD6` | Panel and control borders |
| `hairline` | `#ECEEEA` | Table row dividers, chart bands |
| `accent` | `#0E615B` | The one primary action per screen, focus rings, links (7.3:1) |
| `warning` | `#8A5300` | Gaps, refusals, values needing review (5.2:1 on its tint) |
| `warning-tint` | `#F4E7CF` | Sample banner, refusal background |

One accent. No gradients. Status never relies on colour alone.

### Type

| Role | Face | Size and weight |
|---|---|---|
| Interface text | Be Vietnam Pro (covers Vietnamese diacritics) | 14px / 1.45, weight 400; labels 500; headings 600 |
| Numbers, intervals, identifiers | IBM Plex Mono | 14px values, 12px intervals and source links |
| Page title | Be Vietnam Pro 600 | 28px, tracking −0.01em |
| Section heading | Be Vietnam Pro 600 | 18px |
| Caption and table header | Be Vietnam Pro 500 | 12px, `secondary` |

**Presentation mode** (design review #12, sprint 5) scales everything for a projector: body 18px, numbers 20px and up, captions 15px.

### Space

The scale is 4, 8, 12, 16, 20, 24, 28, 32 and 36px.

| Setting | Value |
|---|---|
| Page padding | 28px top, 36px sides |
| Gap between sections | 20px |
| Table cell padding | 9px by 10px |
| Rail width | 232px |
| Rail row height | 44px |

Headings sit closer to what follows them than to what precedes them.

### Shape

| Element | Radius |
|---|---|
| Panels | 8px |
| Controls | 6px |
| Pills | 999px |

There are no shadows; depth comes from the border and the surface against the ground.

## Components

These live in `platform_zone/web/components.py`.

| Component | Rule it enforces |
|---|---|
| `label_mark` | Filled circle **Learned**, half circle **Elicited**, ring **Assumed**, in `ink`, always followed by the word. Shape is never the only signal. |
| `quantity` | Value, interval with its type, and mark, rendered together. It refuses a bare number. Inside a table cell the interval drops to its own line. |
| `SourceLink` (`.src`) | Mono 11px link to a passage, export key or run id. Every field, theme and parameter has one. |
| `SAMPLE_BANNER` | On every page of a synthetic run: "Sample values. Synthetic study, not real patients." |
| Suppressed value | Text "fewer than the minimum cell size", never a zero or a blank (design review #6). |
| `internal only` pill | On profile rows a sponsor report must not show: a site type from fewer than three sites (engineering review A3). |
| Rail | Grouped by the five acts (Ingest, Understand, Learn, Apply, Trust) and Governance. It is the only navigation. |
| Flash | One line after an action: accent for done, warning for refused, with the reason. |
| Forms | Visible labels above every field, never placeholder-as-label. Native buttons only: one `primary` (ink) or `accent` per screen. |

## Layout

- One primary workspace per screen (the main table), plus at most one side panel for source, review or evidence (design review #9). Cards appear only where the card is the interaction, such as a review item.
- Minimum supported width is 1280px. Phones are out of scope.
- Landmarks: `aside` for the rail, `main` for the workspace. Focus rings use `accent` and are always visible.

## Copy

- Utility language: orientation, status, action.
- Every screen states in one line what the user is looking at.
- Vietnamese and English for every label a user sees. Machine-drafted Vietnamese is marked until a native reviewer checks it.